<template>
    <el-container>
        <el-header height="49">
            <div class="roomnum">
                <div>
                    <p>房间</p>
                    <span>{{roomNum}}</span>
                </div>
                <div class="right">
                    <img src="../../images/home-cz/删除.png" alt="">
                </div>
            </div>
        </el-header>

        <el-main class="contentlist">
            <div class="contentlist-box">
                <el-table :data="orderMessage" style="width: 100%" class="rowbox" border
                    :default-sort="{ prop: 'date', order: 'descending' }" :header-cell-style="headerStyle">
                    <el-table-column prop="id" label="序号" width="100" class="titlebox">
                    </el-table-column>

                    <el-table-column prop="orderServicenum" label="项目编号" width="100">
                    </el-table-column>

                    <el-table-column prop="orderServicetype" label="项目名称" width="100">
                    </el-table-column>

                    <el-table-column prop="orderPrice" label="价格" width="100">
                    </el-table-column>

                    <el-table-column prop="orderNumber" label="数量" width="100">
                    </el-table-column>


                    <el-table-column prop="startime" label="上钟时间" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="handleDelete(scope)"
                                style=" background-color: white;border:none;color: black">
                                <img src="../../images/home-cz/上传.png" alt="" @click="time(scope.row.id)"
                                    v-if="scope.row.orderLastClocktime == null ">
                                <div class="time" v-else>{{scope.row.orderLastClocktime}}</div>
                            </el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="overtime" label="下钟时间" width="150">

                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="handleDelete(scope)"
                                style=" background-color: white;border:none;color: black">
                                <img src="../../images/home-cz/下载.png" alt=""
                                    v-if="scope.row.orderNextClocktime == null ">
                                <div v-else>{{scope.row.orderNextClocktime}}</div>
                            </el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="" label="技师" width="100">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.orderTechnician" placeholder="请选择" style="font-size: 15px"
                                class="select" @click.native="change(scope)">
                                <el-option v-for="item in options" :key="item.technician_name"
                                    :label="item.technician_name" :value="item.technician_name" class="colors">
                                </el-option>
                            </el-select>
                        </template>

                    </el-table-column>

                    <el-table-column label="操作" class="operation">
                        <template slot-scope="scope">
                            {{scope.row.state}}
                            <div class="operationminbox1">
                                <img src="../../images/home-cz/加钟点钟.png" alt="" @click="addtimes(scope)">
                            </div>
                            <div class="operationminbox2">
                                <img src="../../images/home-cz/打钩.png" alt="" @click="actpostMessage(scope)">
                                <img src="../../images/home-cz/删除.png" alt="" @click="actdelmessage(scope)">
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <div class="addproject">
                <el-button type="text" @click="dialogFormVisible = true" class="projectbox">
                    <img src="../../images/home-cz/添加项目.png" alt="">
                </el-button>

                <el-dialog title="选择项目" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <div class="box">
                            <el-container>
                                <el-aside width="150px">
                                    <div class="box2">
                                        <p class="xmtitle">项目列表</p>
                                        <div :class="{'xmlist':item.id == isshow}" v-for="item in project"
                                            :key="item.index" @click="actproject(item.id)">
                                            <div class="xmlist-img">{{item.id}}</div>
                                            <div class="xmlist-name">{{item.gproject}}</div>
                                        </div>
                                    </div>
                                </el-aside>
                                <el-main>
                                    <div class="conent">
                                        <div class="conent-minbox" v-for="item in type" :key="item.id">
                                            <div class="minbox-left">

                                            </div>
                                            <div class="minbox-right">
                                                <p>{{item.nfuhServicetypeList[0].item}}</p>
                                                <p>{{item.nfuhServicetypeList[0].price}}</p>
                                                <button @click.prevent="addproject(item)">选择项目</button>
                                            </div>
                                        </div>
                                        <div class="page">
                                            <div>
                                                <button @click.prevent="">上一页</button>
                                                <button @click.prevent="">下一页</button>
                                            </div>
                                        </div>
                                    </div>

                                </el-main>
                            </el-container>
                        </div>
                    </el-form>
                </el-dialog>
            </div>
        </el-main>

    </el-container>
</template>

<script>
    import {
        createNamespacedHelpers
    } from "vuex";
    const {
        mapActions,
        mapState,
        mapMutations
    } = createNamespacedHelpers("serviceproject");
    export default {
        data() {
            return {
                list: [{
                        index: '',
                        itemnum: '',
                        name: '',
                        price: '',
                        number: '',
                        technician: '',
                        startime: '',
                        overtime: '',
                        state: false
                    },
                    {
                        index: '',
                        itemnum: '',
                        name: '',
                        price: '',
                        number: '',
                        technician: '',
                        startime: '',
                        overtime: '',
                        state: false
                    }
                ],
                value: '',
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                // 项目总分类
                projectclassification: [{
                        imgurl: '图片',
                        name: '足道',
                        index: '1'
                    },
                    {
                        imgurl: '图片',
                        name: '按摩',
                        index: '2'
                    }
                ],
                isshow: 1,
                // 服务确定
                determine: 0,
                // 当前开台房间号
                roomNum: '',
                // 当前订单id
                orderid: '',

            }
        },
        mounted() {
            this.roomNum = this.$route.query.name
            this.orderid = this.$route.query.orderid
            this.foundingId(this.orderid)
            this.getAllServiceProject();
            this.getAllServiceType();
        },
        methods: {
            ...mapActions(["getAllServiceProject", "getAllServiceType", "foundingId", "nowRoomOneType",
                "idByTechnician", "nowOrderMessage", "starTime","postMessage","delmessage","addtime"
            ]),
            ...mapMutations(["changeproject"]),
            star() {
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;

            },
            handleDelete(val) {
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;
                val.row.startime = _this.gettime
            },
            headerStyle({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (rowIndex == 0) {
                    return 'height:50px'
                }
            },
            change(val) {
                this.idByTechnician(val.row.orderServicetype)
                console.log(val);
            },
            // 点击项目切换分类
            actproject(id) {
                this.isshow = id
                this.changeproject(id)
                this.getAllServiceType();
            },
            // 点击添加项目按钮
            async addproject(item) {
                // 传后端保存当前房间对应的每条服务类型
                const id = this.orderid - 0
                const price = item.nfuhServicetypeList[0].price - 0
                await this.nowRoomOneType({
                    id,
                    item: item.nfuhServicetypeList[0].item,
                    number: item.nfuhServicetypeList[0].number,
                    price
                })
                // 点击选择项目通过订单id查询信息
                await this.nowOrderMessage(this.orderid)
                this.list = this.orderMessage
            },
            // 上钟
            time(id) {
                this.starTime(id)
                this.nowOrderMessage(this.orderid)
            },
            // 发送整条数据
            actpostMessage(scope) {
                const id = scope.row.id
                const orderTechnician = scope.row.orderTechnician

                this.postMessage({id,orderTechnician})
              
                
            },
            // 删除数据
            actdelmessage(scope){
                const id = scope.row.id
                this.delmessage(id)
                this.nowOrderMessage(this.orderid)
            },
            // 加钟
            addtimes(scope){
                const id = scope.row.id
                const orderLastClocktime = scope.row.orderLastClocktime
                const orderNextClocktime = scope.row.orderNextClocktime
                this.addtime({id:id,orderLastClocktime:orderLastClocktime,orderNextClocktime:orderNextClocktime})
                this.nowOrderMessage(this.orderid)
            }
        },
        computed: {
            ...mapState(["project", "type", "orderMessage", "options"]),
        },
    }
</script>

<style lang="sass" scoped>
    @import '../../css/aaddproject.scss'
</style>
<style>

</style>